<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>111</li>
      <li>222</li>
      <li>333</li>
    </ul>
    <script>
      //解决 点击之后 i值是最后一个值得问题
      //点击li的时候 让自己变颜色
      //循环li 绑定事件
      var lis = document.querySelectorAll("li");
      for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
          console.log(i);
          this.style.background = "red";
        };
      }

      //解决i值是最后一个的问题,通过创建作用域 保存i的值
      //第一种: 通过forEach循环
      /* var lis = document.querySelectorAll("li");
      lis.forEach(function (item, key) {
        item.onclick = function () {
          console.log(key);
        };
      });

      function fn1() {
        var key = 0;
        console.log(key);
      }
      function fn2() {
        var key = 1;
        console.log(key);
      }

      function fn3() {
        var key = 2;
        console.log(key);
      }
      fn1();
      fn2();
      fn3();
      var key = 0;
      var key = 1;
      var key = 2;
      console.log(key); */

      //第二种方式: 人为创建函数作用域
      /*  var lis = document.querySelectorAll("li");
      for (var i = 0; i < lis.length; i++) {
        (function (i) {
          lis[i].onclick = function () {
            console.log(i);
          };
        })(i);
      } */

      //第三种方式 通过元素对象保存i的值
      /*  var lis = document.querySelectorAll("li");

      for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
        lis[i].key = i;
        console.dir(lis[i]);
        lis[i].onclick = function () {
          console.log(i);
          console.dir(this);
          console.log(this.key);
        };
      } */

      //第四种方式: 通过let 来替代var 的声明
      //let会有局部作用域,是块级作用域  块级作用域就是{}
      /*  var a = 10;
      let a = 10; */
      // var lis = document.querySelectorAll("li");
      // for (let i = 0; i < lis.length; i++) {
      //   lis[i].onclick = function () {
      //     console.log(i);
      //   };
      // }

      /* 
      总结: 解决i值是最后一个的问题 
      方式一: forEach循环代替for循环
      方式二: let来替代for循环里的var 
      方式三: 创建自执行函数  保存i的值
      方式四: 通过元素对象 绑定i的值
      */
    </script>
  </body>
</html>
